<template>
    <view class="room br-24 pt-20">
        <view class="room-title align-center ft-32 t-3 bold"> 原订单信息 </view>
        <view class="pl-30 pr-30 t-6 ft-28 pb-24">
            <view class="align-center space-between ft-32 pt-12 pb-10">
                <view class="">
                    {{ info.checkInDate || '' }} {{ getWeek(info.checkInDate) }}
                    <text class="t-9"> - </text>
                    {{ info.checkOutDate || '' }} {{ getWeek(info.checkOutDate) }}
                </view>
                <view class="ft-28">{{ info.nights || 1 }}晚</view>
            </view>
            <view class="ft-32">{{ info.roomTypeName || '' }}</view>
            <view class="t-9 mt-10" v-if="info?.breakfastCount">
                {{ info?.breakfastCount || 0 }}份早餐
            </view>
            <view class="t-9 mt-10" v-else> 无早餐 </view>
        </view>
    </view>
</template>

<script setup>
/**
 * @description
 * @author yinzhi
 * @date 2025-05
 */
import { computed, defineComponent } from 'vue'
import dayjs from 'dayjs/esm/index'
defineComponent({
    name: 'RoomInfo'
})
// 接收父组件传值
const props = defineProps({
    info: {
        type: Object,
        default: () => {}
    }
})

import { useStore } from 'vuex'
const store = useStore()
// 入住信息
const checkInInfo = computed(() => store.state.platform.checkInInfo || '')
// 入住时间
const startTime = computed(() => dayjs(checkInInfo.value.startDate).format('MM月DD日') || '')
const endTime = computed(() => dayjs(checkInInfo.value.endDate).format('MM月DD日') || '')
// 酒店信息
const hotelInfo = computed(() => store.state.platform.hotelInfo || '')
// 获取星期
const getWeek = date => {
    const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    return week[dayjs(date).day()]
}
</script>

<style scoped lang="scss">
.room {
    background: $uni-bg-color;
    box-shadow: 0 0 10rpx 0 rgba($color: #000000, $alpha: 0.08);
    &-title {
        border-radius: 24rpx 24rpx 0 0;
        padding: 0 30rpx;
    }
}
</style>
